<div bsModal #actionModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="actionModal" aria-hidden="true"
  [config]="{backdrop: 'static'}">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form *ngIf="active" #editForm="ngForm" novalidate (ngSubmit)="save()">

        <div class="modal-header">
          <h4 class="modal-title">
            <span>材料入库</span>
          </h4>
          <button type="button" class="close" (click)="close()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>

        <div class="modal-body" style="padding-top: 0;">
          <div class="into-step">
            <p-steps [model]="items" [activeIndex]="activeIndex" styleClass="steps-custom"></p-steps>
          </div>

          <div [hidden]="activeIndex === 1">
            <div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
              <div class="m-demo__preview text-center">
                <div class="row">
                  <div class="col-md-3">
                    <small class='text-muted'>物资名称</small>
                    <h6 style='margin-top: 10px;'>{{releaseStockBill.materialName}}</h6>
                  </div>
                  <div class="col-md-3">
                    <small class='text-muted'>图号</small>
                    <h6 style='margin-top: 10px;'>{{releaseStockBill.drawingCode}}</h6>
                  </div>
                  <div class="col-md-3">
                    <small class='text-muted'>任务号</small>
                    <h6 style='margin-top: 10px;'>{{releaseStockBill.taskCode}}</h6>
                  </div>
                  <div class="col-md-3">
                    <small class='text-muted'>合格证</small>
                    <h6 style='margin-top: 10px;'>{{releaseStockBill.hgzNo}}</h6>
                  </div>
                </div>
                <div class="row" style="margin-top: 15px;">
                  <div class="col-md-3">
                    <small class='text-muted'>炉批号</small>
                    <h6 style='margin-top: 10px;'>{{releaseStockBill.invFurBatch}}</h6>
                  </div>
                  <div class="col-md-3">
                    <small class='text-muted'>质检单号</small>
                    <h6 style='margin-top: 10px;'>{{releaseStockBill.hgz_zjd}}</h6>
                  </div>
                  <div class="col-md-3">
                    <small class='text-muted'>牌号</small>
                    <h6 style='margin-top: 10px;'>{{releaseStockBill.invXhPhCpdh}}</h6>
                  </div>
                  <div class="col-md-3">
                    <small class='text-muted'>规格</small>
                    <h6 style='margin-top: 10px;'>{{releaseStockBill.invScale}}</h6>
                  </div>
                </div>
                <div class="row" style="margin-top: 15px;">
                  <div class="col-md-3">
                    <small class='text-muted'>尺寸</small>
                    <h6 style='margin-top: 10px;'>{{releaseStockBill.jcCc}}</h6>
                  </div>
                  <div class="col-md-3">
                    <small class='text-muted'>专用状态</small>
                    <h6 style='margin-top: 10px;'>{{releaseStockBill.zhuanYongStatus}}</h6>
                  </div>
                  <div class="col-md-3">
                    <small class='text-muted'>描述</small>
                    <h6 style='margin-top: 10px;'>{{releaseStockBill.remark}}</h6>
                  </div>
                </div>
                <div class="row" style="margin-top: 15px;">
                  <div class="col-md-3">
                    <small class='text-muted'>材料类型</small>
                    <select class="form-control" (change)="getTypeChange($event.target.value)" style="width: 96px;margin-left: 31px;" required>
                      <option value='主材'>主材</option>
                      <option value='辅材'>辅材</option>
                      <option value='锻铸件'>锻铸件</option>
                    </select>
                  </div>
                  <div class="col-md-3">
                    <small class='text-muted'>材料来源</small>
                    <select class="form-control" (change)="getLYChange($event.target.value)" style="width: 96px;margin-left: 31px;" required>
                      <option value="物流中心">物流中心</option>
                      <option value="物流经开部">物流经开部</option>
                      <option value="航天集采平台">航天集采平台</option>
                      <option value="锻铸件">锻铸件</option>
                      <option value="剧毒品">剧毒品</option>
                    </select>
                  </div>
                </div>
              </div>
            </div>

            <div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
              <div class="m-demo__preview text-center">
                <div class="row">
                  <div class="col-md-3">
                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
                      <label>数量</label>
                      <input class="form-control text-center" type="number" name="releaseStockBill.realiteNum" [ngClass]="{'edited': releaseStockBill.realiteNum}"
                        [(ngModel)]="releaseStockBill.realiteNum">
                    </div>
                  </div>
                  <div class="col-md-3">
                    <label>总价</label>
                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
                      <input class="form-control text-center" type="number" name="releaseStockBill.totalPrice" [ngClass]="{'edited': releaseStockBill.totalPrice}"
                        [(ngModel)]="releaseStockBill.totalPrice">

                    </div>
                  </div>
                  <div class="col-md-3">
                    <label>重量</label>
                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
                      <input class="form-control text-center" type="number" name="releaseStockBill.realNum" [ngClass]="{'edited': releaseStockBill.realNum}"
                        [(ngModel)]="releaseStockBill.realNum">

                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="form-group form-md-line-input form-md-floating-label no-hint">
                      <label>单价</label>
                      <input class="form-control text-center" type="number" name="releaseStockBill.unitPrice" [ngClass]="{'edited': releaseStockBill.unitPrice}"
                        [(ngModel)]="releaseStockBill.unitPrice">

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div [hidden]="activeIndex === 0">
            <div class="m-demo" data-code-preview="true" data-code-html="true" data-code-js="false">
              <div class="m-demo__preview text-center">
                <div class="row">
                  <div class="col-md-4">
                    <div class="form-group">
                      <select #areaCombobox name="area" class="form-control" [(ngModel)]="areaId" [attr.data-live-search]="true" jq-plugin="selectpicker"
                        (change)="loadShelfs()" title="选择区域">
                        <option value="">{{emptyText}}</option>
                        <option *ngFor="let area of areas" [value]="area.id">{{area.name}}</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <select #shelfCombobox name="shelf" class="form-control" [(ngModel)]="shelfId" jq-plugin="selectpicker" [attr.data-live-search]="true"
                      (change)="loadPositions()" title="选择货架">
                        <option value="">{{emptyText}}</option>
                        <option *ngFor="let shelf of shelfs" [value]="shelf.id">{{shelf.name}}</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <select #positionCombobox name="position" class="form-control" [(ngModel)]="positionId" jq-plugin="selectpicker" [attr.data-live-search]="true"
                      title="选择货位">
                        <option value="">{{emptyText}}</option>
                        <option *ngFor="let position of positions" [value]="position.id">{{position.name}}</option>
                      </select>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="btn-group btn-group btn-group-justified" style="margin: auto;">
              <button class="btn m-btn--pill m-btn--air btn-warning" [disabled]="activeIndex === 0" (click)="activeIndex = 0">上一步</button>
              <button class="btn m-btn--pill m-btn--air btn-warning" [disabled]="activeIndex === 1" (click)="onNextBtnClick()">下一步</button>
            </div>
          </div>
        </div>

        <div class="modal-footer">
          <button [disabled]="saving" type="button" class="btn btn-default" (click)="close()">{{l("Cancel")}}</button>
          <button type="submit" class="btn btn-success" [disabled]="!positionId || !activeIndex" [buttonBusy]="saving" [busyText]="'投产中...'">
            <i class="fa fa-check-circle"></i>
            <span>入库</span>
          </button>
        </div>

      </form>

    </div>
  </div>
</div>
